// const verticesOfCube = [
//     -0.5,0,-0.5,  0.5,0,-0.5,  0.5,0,0.5,  -0.5,0,0.5,
//     -0.5,0.7,-0.5,  0.5,0.7,-0.5,  0.5,0.7,0.5,  -0.5,0.7,0.5,
// ];

// const indicesOfFaces = [
//     0,1,2,    0,2,3,// bottom
//     4,5,6,    4,6,7,// top

//     // 0,3,7,    0,4,7,// left
//     // 2,6,7,    1,2,6,// right

//     // 2,3,7,    2,6,7,// front
//     // 0,1,5,    0,4,5,// back
// ];

// const geometry = new THREE.PolyhedronGeometry( verticesOfCube, indicesOfFaces );
// const material = new THREE.MeshBasicMaterial( {  side:THREE.DoubleSide,transparent:true,opacity:.5 } );
// const mesh = new THREE.Mesh( geometry, material ) ;
// scene.add( mesh );

// const edgeLength = 10;

// const trangle = new THREE.Shape();
// trangle.moveTo( 0,0 );
// trangle.lineTo( edgeLength, 0 );
// trangle.lineTo( edgeLength, edgeLength );
// trangle.lineTo( 0, 0 );

const extrudeSettings = {
	depth: 20,
	bevelEnabled: false,
};

// const geometry = new THREE.ExtrudeBufferGeometry( trangle, extrudeSettings );
// const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// const mesh = new THREE.Mesh( geometry, material ) ;
// scene.add( mesh );
function initWater() {
	let geometry
	let material
	let mesh

	const water = new THREE.Shape()
	water.moveTo(0, 0)
	water.lineTo(20, 0)
	water.lineTo(30, 10)
	water.lineTo(30, 30)
	water.lineTo(0, 30)
	water.lineTo(0, 0)

	geometry = new THREE.ExtrudeBufferGeometry(water, extrudeSettings);
	material = new THREE.MeshBasicMaterial({ color: 0x40acf9, opacity: 0.5, transparent: true, side: THREE.DoubleSide });
	mesh = new THREE.Mesh(geometry, material);
	scene.add(mesh);
}

function initWaterPlane() {
	const geometry = new THREE.PlaneGeometry(30, 20);
	const texture = new THREE.TextureLoader().load('./water.jpg')
	const material = new THREE.MeshBasicMaterial({ map: texture });
	const plane = new THREE.Mesh(geometry, material);
	plane.rotation.x = -90 / 180 * Math.PI
	plane.position.x = 15
	plane.position.y = 30.1
	plane.position.z = 10
	scene.add(plane);
}

function initStatisticPlane() {
	const geometry = new THREE.PlaneGeometry(30, 20);

	const canvas = document.createElement('canvas')
	canvas.setAttribute('width', 30)
	canvas.setAttribute('height', 20)
	canvas.width = 30
	canvas.height = 20
	// document.body.append(canvas)

	const ctx = canvas.getContext('2d')
	// 线性渐变
	const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
	gradient.addColorStop(0, '#2dea9c');
	gradient.addColorStop(1, 'transparent');

	ctx.fillStyle = gradient;
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	const texture = new THREE.CanvasTexture(canvas)
	const material = new THREE.MeshBasicMaterial({ map: texture, transparent: true, opacity: 0.5, side: THREE.DoubleSide });
	const plane = new THREE.Mesh(geometry, material);
	plane.rotation.x = 90 / 180 * Math.PI
	plane.position.x = 15
	plane.position.y = 32
	plane.position.z = 10
	scene.add(plane);
}

function initLine() {
	const vertices = new Float32Array([
		15, 32, 0,
		8, 35, 0,
		0, 35, 0,
	])

	const geometry = new THREE.BufferGeometry();
	// itemSize = 3 因为每个顶点都是一个三元组。
	geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
	const material = new THREE.LineDashedMaterial({ color: 0xffffff, dashSize: 1, gapSize: 0.5 })

	const line = new THREE.Line(geometry, material);
	line.rotation.y=-30/180*Math.PI
	// 画虚线时必须调用
	line.computeLineDistances();
	scene.add(line);
}

function initText() {
	const loader = new THREE.FontLoader();

	loader.load('fonts/helvetiker_regular.typeface.json', function (font) {
		const geometry = new THREE.TextGeometry('Hello three.js!', {
			font: font,
			size: 1,
			height: 0,
			// curveSegments: 12,
			bevelEnabled: false,
			// bevelThickness: 10,
			// bevelSize: 8,
			// bevelSegments: 5
		});
		const material= new THREE.MeshBasicMaterial({ color: 0x17807c, opacity: 1, transparent: true })
		const mesh = new THREE.Mesh( geometry, material );
		mesh.position.y=36
		mesh.rotation.y=-30/180*Math.PI
		// mesh.position.z=10
		scene.add(mesh)
		animate()
	})
}
function initDam() {
	const dam = new THREE.Shape()
	dam.moveTo(20, 0)
	dam.lineTo(30, 10)
	dam.lineTo(30, 40)
	dam.lineTo(40, 40)
	dam.lineTo(40, 35)
	dam.lineTo(50, 0)
	dam.lineTo(20, 0)
	const geometry = new THREE.ExtrudeBufferGeometry(dam, extrudeSettings);
	const texture = new THREE.TextureLoader().load('./z.jpg')
	texture.wrapS = THREE.RepeatWrapping;
	texture.wrapT = THREE.RepeatWrapping;
	const materials = [
		new THREE.MeshBasicMaterial({ map: texture }),
		new THREE.MeshBasicMaterial({ color: 0x87807c, opacity: 1, transparent: true })
	]
	mesh = new THREE.Mesh(geometry, materials);
	scene.add(mesh);
}

// camera.rotation.y=-30/180*Math.PI

camera.position.x = -75
camera.position.y = 44
// camera.rotation.x=-0/180*Math.PI
camera.position.z = 100;
camera.lookAt(25, 44, 10)

// const controls = new THREE.OrbitControls(camera, renderer.domElement)

initText()
initLine()
initWater()
initWaterPlane()
initDam()
initStatisticPlane()

// const edges = new THREE.EdgesGeometry(geometry);
// const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0xffffff }));
// scene.add(line);

animate()